import styles from '../index.less'
import {Icon} from 'antd'

/**
 *
 * @method EmptyVideo
 * @param {string} label
 * @param {function} handleClick
 */
const EmptyVideo = props =>
<div className={styles['empty-wrap']}
  style={{
    height: props.height || 155,
    width: props.width || 248,
    marginRight: '10px',
    marginBottom: '10px',
  }}
  onClick={props.handleClick}
>
  <div className={styles['add']}>
    <Icon type="plus" />
    <div className={styles['text']}>
      {props.label}
    </div>
  </div>
</div>

/**
 *
 * @method ImgVideo
 * @param {string} label
 * @param {function} onVisit 预览 
 * @param {function} replace
 * @param {function} delete
 */
const ImgVideo = props =>
<div className={styles['cover-img-video']} >
  <div className={styles['img-warp']}>
    <img src={props.url} />
    <span className={styles['link']} onClick={props.onVisit}></span>
  </div>
  <div className={styles['operation']}>
    <div className={styles['replace']} onClick={props.replace}>
      <Icon type="edit" />
    </div>
    <div className={styles['delete']} onClick={props.delete}>
      <Icon type="delete" />
    </div>
  </div>
</div>

/**
 *
 * @method VideoItem
 * @param {funtion} onVisit
 * @param {string} options
 * coverUrl duration, title, uploadTime, videoId, ratio, interactId
 * ratio：'N/A' 比例不符合要求
 * interactId: null 普通视频
 * filterDurGreater filterDurLess 时长范围
 */


const VideoItem = props =>{
  let {
      coverUrl, duration, title, uploadTime, videoId,
      ratio, interactId, filterDurGreater, filterDurLess
    } = props
  let canSelect = ratio === 'N/A' ? false : true;
  let canPlay = false
  if(duration < filterDurGreater || duration > filterDurLess) {
    canPlay= true
  }
  return (
    <div className={styles['video-item']} >
      <div className={styles['item-select']}></div>
      <div className={styles['cover']}>
        {ratio === 'N/A' && <div className={styles['mask']} >比例不符合要求</div>}
        {canPlay && <div className={styles['mask']} >时长不符合要求</div>}
        <div className={styles['ice-img']}>
          <img src={coverUrl}/>
          <span className={styles['link']} onClick={props.onVisit}></span>
        </div>
        <span className={styles['duration']}>{Math.floor(duration/60)}:{duration%60}</span>
      </div>
      <div className={styles['info']}>
        <div className={styles['title']}>
          {interactId && <span className={styles['label']}>互动</span>}
          <span className={styles['text']} >{title}</span>
        </div>
        <div className={styles['time']}>{uploadTime}</div>
        {props.children}
      </div>
    </div>
  )
}


export {EmptyVideo, ImgVideo, VideoItem}
